<template>
	<view class="above">
		<view class="" v-for="(item, index) in orederDetails" :key="index">
			<view class="body">
				<!-- 已取消 -->
				<view class="" v-if="item.orderStatus === 2">
					<view class="title">
						<view class="callOff"><image src="../../static/img/orderDetails/callOff.png" mode=""></image></view>
						<view class="">
							<view class="cancel">已取消</view>
							<view class="hint">如有需要请重新购票哦~</view>
						</view>
					</view>
				</view>
				<!-- 已支付 -->
				<view class="" v-else-if="item.orderStatus === 1">
					<view class="title">
						<view class="callOff"><image src="../../static/img/orderDetails/paid.png" mode=""></image></view>
						<view class="">
							<view class="cancel">已支付</view>
							<view class="hint">已经成功订票,请携带身份证到车站自助机取票哦~</view>
						</view>
					</view>
				</view>
				<!-- 待支付 -->
				<view class="" v-else-if="item.orderStatus === 0">
					<view class="title">
						<view class="callOff"><image src="../../static/img/orderDetails/wait.png" mode=""></image></view>
						<view class="">
							<view class="cancel">待付款</view>
							<view class="hint">为了不影响出行,请在6分钟内完成支付哦~</view>
						</view>
					</view>
				</view>
				<!-- 已打印 -->
				<view class="" v-else-if="item.orderStatus === 3">
					<view class="title">
						<view class="callOff"><image src="../../static/img/orderDetails/paid.png" mode=""></image></view>
						<view class="">
							<view class="cancel">已打印</view>
							<view class="hint">订单已经打印,有问题了可以咨询车站工作人~</view>
						</view>
					</view>
				</view>
				<!-- 退款中 -->
				<view class="" v-else-if="item.orderStatus === 4 || 9">
					<view class="title">
						<view class="callOff"><image src="../../static/img/orderDetails/wait.png" mode=""></image></view>
						<view class="">
							<view class="cancel">退款中</view>
							<view class="hint">订单正在退款中</view>
						</view>
					</view>
				</view>
				<!-- 退款成功 -->
				<view class="" v-else-if="item.orderStatus === 5 || 6 || 7 || 8">
					<view class="title">
						<view class="callOff"><image src="../../static/img/orderDetails/paid.png" mode=""></image></view>
						<view class="">
							<view class="cancel">已退款</view>
							<view class="hint">车票已成功退款</view>
						</view>
					</view>
				</view>
				<!-- 车票详情 -->
				<view class="bus">
					<view class="time">
						<view class="">{{ item.startDate }}</view>
						<view class="">{{ item.week }}</view>
						<view class="">{{ item.startTime }}发车</view>
					</view>
					<view class="site">
						<view class="">{{ item.stationName }}</view>
						<view class="arrows"><image style="display: block;" class="" src="../../static/img/arrows.png" mode=""></image></view>
						<view class="">{{ item.targetName }}</view>
					</view>
					<view class="base">
						<view class="mileage">里程:{{ item.miles }}km</view>
						<view class="classes">班次:{{ item.busnum }}</view>
					</view>
				</view>

				<view class="popover">
					<view @click="showBottom()" class="">支持在线退票 ></view>
					<view @click="showBottom()" class="">退票规则 ></view>
					<view @click="showBottom()" class="">不支持儿童购票 ></view>
					<bottomSheet :isShowBottom="isShowBottom" :hint="hint" @closeBottom="closeBottom"></bottomSheet>
				</view>
				<!-- 退票 -->
				<view class="" v-if="item.orderStatus === 1">
					<view class="refund">
						<view class="">
							<view class="marked">支持在线退票,请点开下方查看退票规则~</view>
							<view class="rule" @click="examine">《查看退票规则》</view>
						</view>
						<view class="apply" @click="goRefund">申请退票</view>
					</view>
				</view>
				<!-- 乘客详情 -->
				<view class="passenger" v-if="item.orderStatus === 1">
					<view class="number">
						<view class="fare">乘客详情</view>
						<view class="people">(订单共{{ item.ticketAmount }}人)</view>
					</view>
					<view class="" v-for="(obj, ite) in ticketInfos" :key="ite">
						<view class="insurance">
							<view class="name">{{ obj.name }}</view>
							<view class="premium">
								<view class="">身份证号:{{ obj.cardid }}</view>
								<!-- 				<view class="">
									<text class="moneys">￥{{ obj.couponMoney }}</text>
									优惠券
								</view> -->
							</view>
							<view class="premium">
								<view class="">保险单号:{{ obj.insureCode }}</view>
								<view class="">
									<text class="moneys">￥{{ obj.insurancePrice }}</text>
									乘意险
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 订单详情 -->
				<view class="order">
					<view class="b_Box">
						<view class="particulars">车票详情</view>
						<view class="box">
							<view class="designation">汽车票</view>
							<view class="">
								<text class="">￥{{ item.price }}</text>
								<text class="multiplication">x</text>
								<text class="counting">{{ item.ticketAmount }}人</text>
							</view>
						</view>
						<view class="box">
							<view class="designation">乘意险</view>
							<view class="">
								<text class="">￥{{ item.insurePayment }}</text>
								<!-- 								<text class="multiplication">x</text>
								<text class="counting">{{ item.ticketAmount }}份</text> -->
							</view>
						</view>
						<view class="box">
							<view class="designation">技术服务费</view>
							<view class="coupon">
								<view class="invoice" @click="invoice">电子发票</view>
								<view class="">￥{{ item.fee }}</view>
							</view>
						</view>
						<view class="box">
							<view class="designation">优惠券</view>
							<view class="coupon">
								<view class="">￥{{ item.couponMoney }}</view>
								<text class="multiplication">x</text>
								<view class="">{{ item.couponCount }}张</view>
							</view>
						</view>
						<view class="" v-if="item.orderStatus === 1">
							<view class="box">
								<view class="designation">取票码</view>
								<view class="">{{ item.password }}</view>
							</view>
						</view>
						<view class="" v-for="(obj, ite) in ticketInfos" :key="ite">
							<view class="" v-if="item.orderStatus === 1 || 3">
								<view class="box">
									<view class="designation">乘车人</view>
									<view class="">{{ obj.name }}</view>
								</view>
							</view>
							<view class="box">
								<view class="designation">手机号</view>
								<view class="phone">{{ obj.phone }}</view>
							</view>
						</view>
						<view class="box_designation">
							<view class="designation">订单号</view>
							<view class="orderNumber">{{ orderCode }}</view>
						</view>
						<view class="sum">
							<view class="totalAmount">订单总额</view>
							<view class="amount">￥{{ item.orderPayment + item.insurePayment + item.fee - item.couponMoney }}</view>
						</view>
					</view>
				</view>
				<!-- 常见问题 -->
				<view style="width: 100%;"><problem :JSONData="JSONData" @PIndex="PIndex" /></view>
				<!-- 客服 -->
				<view class="" v-if="item.orderStatus === 1">
					<view class="service">
						<button class="artificial" @click="phone">人工客服</button>
						<button type="default" class="WeChat" open-type="contact">微信客服</button>
					</view>
				</view>
			</view>
			<!-- 已支付 -->
			<view class="" v-if="item.orderStatus === 1" @click="getBack"><view class="tracking">返回首页</view></view>
			<!-- 待付款 -->
			<view class="obligation" v-if="item.orderStatus === 0">
				<view class="abrogate" @click="getCancel">取消订单</view>
				<view class="payment" @click="payment">立即付款</view>
			</view>
			<!-- 已打印 -->
			<view class="anew" v-if="item.orderStatus === 3" @click="goAnew">重新购票</view>
			<!-- 已取消 -->
			<view class="anews" v-if="item.orderStatus === 2" @click="goAnew">重新购票</view>
		</view>
		<!-- 加载中 -->
		<ourLoading isFullScreen text="加载中..." :active="active"></ourLoading>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
import problem from '@/pages/views/problem/problem.vue';
import bottomSheet from '../../components/bbh-sheet/bottomSheet.vue';
export default {
	components: {
		bottomSheet,
		problem
	},
	data() {
		return {
			hint: value.value.JSONData.question,
			JSONData: value.value.JSONData.questionList,
			orderCode: '',
			ticketInfos: [],
			orederDetails: [],
			active: true,
			obligation: false,
			isShowBottom: false, //底部弹窗开关
			isShowLeftFri: false, //先显示阴影，再显示侧滑内容，加个延时不让页面闪动体验会更好点
			isShowRight: false, //右边侧滑开关
			busTicketFee: ''
		};
	},
	onLoad(options) {
		this.orderCode = options.id;
		this.getOrderDetails();
	},
	onPullDownRefresh(setData) {
		// 下拉监听事件
		if (this.orederDetails != ' ' && this.ticketInfos != ' ') {
			uni.stopPullDownRefresh();
		}
	},
	methods: {
		getOrderDetails() {
			let data = {
				orderCode: this.orderCode,
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			data.sign = utils.utils.GetSign(data);
			this.$http
				.request({
					url: '/Order/OrderDetail',
					method: 'get',
					data: data
				})
				.then(data => {
					this.busTicketFee = data.data.busTicketFee;
					this.active = false;
					if (data.data.result === false) {
						uni.showModal({
							title: '提示',
							content: data.data.msg,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({});
								} else if (res.cancel) {
								}
							}
						});
					}
					this.orederDetails.push(data.data.orderInfo);
					this.ticketInfos = data.data.ticketInfos;
					uni.setStorage({
						data: data.data,
						key: 'reimburse'
					});
				});
		},
		//底部开关
		showBottom() {
			this.isShowBottom = true;
		},
		closeBottom() {
			this.isShowBottom = false;
		},
		// 订票规则
		examine() {
			uni.showModal({
				title: '退票规则',
				content:
					'*退款手续费不含保险金额（为实际付款金额减去保险金额）。\r\n1、距离开车时间2小时前办理退票，按票面额10%计收退票费。\r\n2、距离开车时间2小时以内办理退票，按票面额20%计收退票费。\r\n3、班车开车后1小时内办理退票，按票面额50%计收退票费。 \r\n4、班车开车1小时后不办理退票。\r\n5、确认退款后，退款金额将于7个工作日内退回。 \r\n6、实际退款时间以服务器执行时间为准。\r\n注：实际运行中，有可能出现不同车站不同费率的情况，以车站实际退款为准（各车站的退票规则并不完全一致）。',
				showCancel: false,
				success(res) {}
			});
		},
		// 常见问题
		PIndex(i) {
			if (i) {
				uni.navigateTo({
					url: '../views/webHTML/webHTML?index=0&select=' + i
				});
			} else {
				uni.navigateTo({
					url: '../views/webHTML/webHTML?index=0'
				});
			}
		},
		// 人工客服
		phone() {
			uni.makePhoneCall({
				// 手机号
				phoneNumber: '96606',
				// 成功回调
				success: res => {},
				// 失败回调
				fail: err => {
					console.log(err);
				}
			});
		},
		goRefund() {
			uni.navigateTo({
				url: '../refund/refund'
			});
		},
		// 购买返程
		getBack() {
			uni.switchTab({
				url: '../index/index'
			});
		},
		// 重新购票
		goAnew() {
			uni.navigateTo({
				url: '../busInfo/busInfo'
			});
		},
		// 支付
		payment() {
			const that = this;
			let dataReq = {
				orderCode: this.orderCode,
				couponId: '',
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			dataReq.sign = utils.utils.GetSign(dataReq);
			this.$http
				.request({
					url: '/Wechat/WechatPayOrder',
					method: 'POST',
					data: dataReq
				})
				.then(res => {
					if (res.data.result == false) {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: res.data.msg,
							success: function(res) {}
						});
					} else {
						uni.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.noncestr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: res => {},
							fail: err => {
								console.log('fail:' + JSON.stringify(err));
							}
						});
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 取消订单
		getCancel() {
			var that = this;
			uni.showModal({
				title: '提示',
				content: '确定取消该订单吗？',
				success: function(res) {
					if (res.confirm) {
						let dataReq = {
							orderCode: that.orderCode,
							ticks: utils.utils.GetTicks(),
							channel: that.$tokenObj.obj.channel
						};
						dataReq.sign = utils.utils.GetSign(dataReq);
						that.$http
							.request({
								url: '/Order/BusTicketCancleOrder',
								method: 'POST',
								data: dataReq
							})
							.then(res => {
								uni.switchTab({
									url: '../order/order'
								});
							})
							.catch(err => {
								console.log(err);
							});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		// 电子发票
		invoice() {
			if (this.busTicketFee == '') {
				uni.showToast({
					icon: 'none',
					title: '不可开发票',
					duration: 2000
				});
			} else {
				if (this.busTicketFee.status == 0) {
					uni.showToast({
						icon: 'none',
						title: '已申请 待开票',
						duration: 2000
					});
				} else if (this.busTicketFee.status == 1) {
					uni.showToast({
						icon: 'none',
						title: '已开票待发送邮箱',
						duration: 2000
					});
				} else if (this.busTicketFee.status == 2) {
					uni.showToast({
						icon: 'none',
						title: '已撤销开票',
						duration: 2000
					});
				} else if (this.busTicketFee.status == 3) {
					uni.showToast({
						icon: 'none',
						title: '发票已发送邮箱',
						duration: 2000
					});
				} else if (this.busTicketFee.status == -1) {
					uni.navigateTo({
						url: '../invoice/invoice?code=' + this.orderCode
					});
				}
			}
		}
	}
};
</script>

<style scoped>
.above {
	width: 100%;
	height: 100%;
	background: linear-gradient(#00a0e9, #ffffff);
}
.body {
	width: 94%;
	margin: auto;
	margin-bottom: 100upx;
}
.title {
	display: flex;
}
.callOff {
	width: 85upx;
	height: 80upx;
	margin: 40upx;
}
.callOff image {
	width: 100%;
	height: 100%;
}
.cancel {
	color: #ffffff;
	font-size: 50upx;
	margin-top: 20upx;
}
.hint {
	color: #ffffff;
	font-size: 25upx;
	margin-top: 10upx;
}
/* 班次详情 */
.bus {
	border-radius: 10upx;
	background-color: #ffffff;
}
.time {
	display: flex;
	padding-top: 30upx;
}
.time view {
	font-size: 35upx;
	font-weight: bold;
	margin-left: 32upx;
}
.site {
	display: flex;
	margin-top: 30upx;
}
.site view {
	font-size: 35upx;
	font-weight: 600;
	margin-left: 35upx;
}
.arrows {
	width: 110upx;
	height: 15upx;
	margin-top: 13upx;
}
.arrows image {
	width: 100%;
	height: 100%;
}
.base {
	display: flex;
	color: #999999;
	margin-top: 15upx;
	padding-bottom: 10upx;
}
.mileage {
	margin-left: 35upx;
}
.classes {
	margin-left: 60upx;
}

.popover {
	width: 100%;
	display: flex;
	margin-top: 20upx;
}
.popover view {
	height: 43upx;
	color: #01a1e9;
	padding: 0 25upx;
	font-size: 20upx;
	line-height: 43upx;
	margin-left: 25upx;
	border-radius: 20upx;
	background-color: #ffffff;
}
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
/* 退票 */
.refund {
	margin: auto;
	display: flex;
	margin-top: 20upx;
	border-radius: 10upx;
	background-color: #ffffff;
	justify-content: space-between;
}
.marked {
	color: #ff9900;
	font-size: 25rpx;
	margin: 10rpx 25rpx;
}
.rule {
	color: #cccccc;
	font-size: 22rpx;
	margin: 0 0 10rpx 25rpx;
}
.apply {
	height: 50rpx;
	color: #01a1ea;
	font-size: 25rpx;
	padding: 0 13rpx;
	line-height: 50rpx;
	border-radius: 5upx;
	margin: 20upx 25upx 0 0;
	border: 1upx solid #01a1ea;
}
/* 乘客详情 */
.passenger {
	margin-top: 20upx;
	border-radius: 10upx;
	background-color: #ffffff;
}
.number {
	width: 92%;
	margin: auto;
	display: flex;
	padding: 25upx 0upx 15upx;
	border-bottom: 1rpx solid #cccccc;
}
.fare {
	color: #555555;
	font-size: 32upx;
}
.people {
	margin-left: 5upx;
	color: #999999;
}
.insurance {
	width: 92%;
	margin: auto;
	margin-top: 15upx;
}
.name {
	font-size: 31upx;
	font-weight: 600;
}
.premium {
	display: flex;
	color: #999999;
	padding: 6upx 0;
	font-size: 27upx;
	justify-content: space-between;
}
.moneys {
	padding-right: 5upx !important;
	color: #ff5500 !important;
	font-size: 30upx !important;
}
.money {
	color: #ff5500 !important;
}
/* 车票详情 */
.order {
	margin-top: 20upx;
	border-radius: 10upx;
	background-color: #ffffff;
}
.b_Box {
	width: 92%;
	margin: auto;
}
.particulars {
	font-size: 33upx;
	padding: 20upx 0upx;
	border-bottom: 1upx solid #cccccc;
}
.box {
	display: flex;
	margin-top: 15upx;
	justify-content: space-between;
}
.designation {
	color: #999999;
	font-size: 31upx;
}
.multiplication {
	margin: 0upx 8upx;
}
.box_designation {
	display: flex;
	margin-top: 15upx;
	padding-bottom: 10upx;
	justify-content: space-between;
	border-bottom: 1px solid #cccccc;
}
.sum {
	display: flex;
	margin-top: 15upx;
	padding-bottom: 20upx;
	justify-content: space-between;
}
.amount {
	color: #ff5500;
}
.totalAmount {
	color: #999999;
	font-size: 32upx;
	padding-bottom: 10upx;
}
.coupon {
	display: flex;
}
/* 常见问题 */
.issue {
	margin-top: 20upx;
	border-radius: 10upx;
	margin-bottom: 65upx;
	background-color: #ffffff;
}
.bigBox {
	width: 94%;
	margin: auto;
}
.head {
	display: flex;
	padding-top: 30upx;
	padding-bottom: 15upx;
	justify-content: space-between;
	border-bottom: 1px solid #cccccc;
}
.more {
	display: flex;
	font-size: 28upx;
}
.right {
	width: 40upx;
	height: 40upx;
}
.one {
	display: flex;
	margin-top: 15upx;
	padding-bottom: 25upx;
	justify-content: space-between;
}
.one view {
	width: 300upx;
	height: 77upx;
	color: #808080;
	line-height: 77upx;
	text-align: center;
	background-color: #eaeaea;
}

/* 客服 */
.service {
	width: 100%;
	display: flex;
	font-size: 34upx;
	text-align: center;
	margin-top: 30upx;
	margin-bottom: 125upx;
}
.WeChat {
	width: 50%;
	color: #ffffff;
	border: none !important;
	background-color: #01a1e9;
	border-top-right-radius: 50upx;
	border-bottom-right-radius: 50upx;
	border-top-left-radius: 0upx !important;
	border-bottom-left-radius: 0upx !important;
}
.artificial {
	width: 50%;
	color: #01a1e9;
	line-height: 85upx;
	border: none !important;
	background-color: #ebebeb;
	border-top-left-radius: 50upx;
	border-bottom-left-radius: 50upx;
	border-top-right-radius: 0upx !important;
	border-bottom-right-radius: 0upx !important;
}
button::after {
	border: none;
}
/* 待付款 */
.obligation {
	bottom: 0;
	width: 100%;
	display: flex;
	height: 80upx;
	position: fixed;
	font-size: 35upx;
	line-height: 80upx;
}
.abrogate {
	width: 50%;
	text-align: center;
	background-color: #ebebeb;
}
.payment {
	width: 50%;
	color: #ffffff;
	text-align: center;
	background-color: #01a1e9;
}
/* 重新选票 */
.anew {
	bottom: 0;
	width: 100%;
	height: 80upx;
	color: #ffffff;
	position: fixed;
	font-size: 35upx;
	font-weight: bold;
	text-align: center;
	line-height: 80upx;
	background-color: #00a0ff;
}
.anews {
	bottom: 0;
	width: 100%;
	height: 80upx;
	color: #ffffff;
	position: fixed;
	font-size: 35upx;
	font-weight: bold;
	text-align: center;
	line-height: 80upx;
	background-color: #00a0ff;
}
/* 购买返程 */
.tracking {
	bottom: 0;
	width: 100%;
	color: #ffffff;
	height: 80upx;
	position: fixed;
	font-size: 35upx;
	font-weight: bold;
	text-align: center;
	line-height: 80upx;
	background-color: #00a0ff;
}
/* 发票 */
.invoice {
	width: 130rpx;
	color: #01a1e9;
	font-size: 25rpx;
	text-align: center;
	border-radius: 10rpx;
	border: 1px solid #01a1e9;
}
</style>
